<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Title</title>
    <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="lib/dragula-3.7.2/dist/dragula.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <link rel="stylesheet" href="css/gallery.css">
</head>
<body>
<div class="test">
</div>

<script src="lib/jquery-3.5.1.js"></script>
<script src="lib/dragula-3.7.2/dist/dragula.js"></script>
<script src="lib/layui/layui.js"></script>
<script src="js/preview.js"></script>
<script src="js/gallery.js"></script>
<script>

    var images = [
        'https://cos.sxkid.com/images/topiccircle//topicImage/a78cc8a5-32aa-402d-a6ea-182ade18ed46.jpg',
        '1',
        '2',
        '3',
        'https://cdn.sxkid.com/images/user/97d3ae31-0427-45d8-8da1-000111c45c75/c93090a8-6620-434d-a712-5622e9f41d6d.jpg'
    ];
    images = images.map((image, index)=>{
        return {
            id : index,
            url: image,
            sort: index
        }
    });
    gallery({
        url:'http://localhost:8002/api/upload/upload',
        el: '.test',
        number : 10,
        images:images,
        onDelete: image =>{
            console.log('onDelete', image)

            // true is delete view
            return true;
        }
    })();
</script>
</body>
</html>